<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="cdnload" content="vue" />
    <meta name="author" content="lijinbo" />
    <title>205-js图片裁剪</title>
    <style></style>
  </head>

  <body>
    <p>
      <a href="https://github.com/xyxiao001/vue-cropper" target="_blank"> 好用的图片裁剪插件 vue-cropper </a>
    </p>
    <p>
      <a href="./找不同游戏图片对比示例/m-index.html">找不同游戏图片对比示例</a>
    </p>
    <div id="app">
      <p>
        <span>选择图片</span>
        <input type="file" accept="image/*" @change="selectFile" />
      </p>
      <p>
        <span>开始 x 坐标</span>
        <input type="number" v-model="range.startX" />
        <span>开始 y 坐标</span>
        <input type="number" v-model="range.startY" />
        <br />
        <span>结束 x 坐标</span>
        <input type="number" v-model="range.endX" />
        <span>结束 y 坐标</span>
        <input type="number" v-model="range.endY" />
        <br />
        <button @click="cropping">裁剪</button>
      </p>
      <hr />
      <p>原图：</p>
      <img :src="original" />
      <p>裁剪后：</p>
      <img :src="later" />
    </div>

    <script defer type="module" src="./205-main.js"></script>
  </body>
</html>
